<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>风频分布</title>
		<link rel="stylesheet" href="css/index.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/index.js" ></script>
		<script type="text/javascript" src="js/echarts.min.js" ></script>
	</head>

	<body>
		<div id="app">
			<el-row >
				<el-col :span="12">
					<div id="myChart" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
				<el-col :span="12">
					<div id="myChart1" :style="{width:'100%',height:'400px'}"></div>
				</el-col>
			</el-row>
			
		</div>
		<script>
			new Vue({
				el:'#app',
				data:function(){
					return{
						tableData3: [{
							name:'1#',
							type:'line',
							stack: '总量',
							smooth: true,
							data:[120, 132, 101, 134, 90, 230, 210]
						},{
							name:'2#',
							type:'line',
							stack: '总量',
							smooth: true,
							data:[220, 182, 191, 234, 290, 330, 310]
						},
						{
							name:'3#',
							type:'line',
							stack: '总量',
							smooth: true,
							data:[150, 232, 201, 154, 190, 330, 410]
						},
						{
							name:'4#',
							type:'line',
							stack: '总量',
							smooth: true,
							data:[320, 332, 301, 334, 390, 330, 320]
						}],
						jizu:['1#','2#','3#','4#']
					}
				},
				mounted:function(){
					var myChart = echarts.init(document.getElementById('myChart'));
					var myChart1 = echarts.init(document.getElementById('myChart1'));
					var option = {
					    title: {
					        text: '风速概率分布曲线'
					    },
					    tooltip: {
					        trigger: 'axis'
					    },
					    legend: {
					        data:this.jizu
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        //bottom: '3%',
					        containLabel: true
					    },
					    toolbox: {
					    },
					    xAxis: {
					        type: 'category',
					        name:'风速[m/s]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					       data: ['0','5','10','15','20','25']
					    },
					    yAxis: {
					        type: 'value',
					        name:'风速概率[%]',
					        nameLocation:'center',
					        nameGap:40,
					        boundaryGap: false,
					    },
					    series: this.tableData3
					};

				    myChart.setOption(option)
					myChart1.setOption(option)
				}
			})
			
		</script>
	</body>

</html>